<template>
    <div class="register_style">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名:" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-link type="primary" @click="getBack" style="margin-left:20px">返回首页</el-link>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Router from '@/router/index'
import store from '@/store/index'
export default {
    data(){
        var validateUser = (rule,value,callback)=>{
            if(value == ''){
                callback(new Error('请输入用户名'))
            }else{
                callback();
            }
        };
        var validatePass=(rule,value,callback)=>{
            if(value == ''){
                callback(new Error('请输入密码'));
            }else{
                if(this.ruleForm.checkPass !== ''){
                    this.$refs.ruleForm.validateField('checkPass')
                }
                callback();
            }
        };
        var validateCheck = (rule,value,callback)=>{
            if(value == ''){
                callback(new Error('请再次输入密码'));
            }else if(value !== this.ruleForm.password){
                callback(new Error('两次输入密码不一致!'));
            }else{
                callback();
            }
        };
        var validatePhone = (rule,value,callback)=>{
            if(value == ''){
                callback(new Error('请输入手机号'));
            }else{
                callback();
            }
        };
        var validateEmail = (rule,value,callback)=>{
            if(value == ''){
                callback(new Error('请输入邮箱'));
            }else{
                callback();
            }
        };
        return{
            ruleForm:{
                username:'',
                password:'',
                checkPass:'',
                yanzhengma:'',
                phone:'',
                email:'',
                returnData:''
            },
            rules:{
                username:[{validator:validateUser,trigger:'blur'}],
                password:[{validator:validatePass,trigger:'blur'}],
                checkPass:[{validator:validateCheck,trigger:'blur'}],
                phone:[{validator:validatePhone,trigger:'blur'}],
                email:[{validator:validateEmail,trigger:'blur'}]
            }
        }
    },
    methods:{
        submitForm() {
            var user = {
                'username':this.ruleForm.username,
                'password':this.ruleForm.password,
                'phone':this.ruleForm.phone,
                'email':this.ruleForm.email
            };
            if(user.username=="" || user.password=="" || user.password=="" || user.phone=="" || user.email==""){
                alert("请检查信息是否完整");
            }else{
                this.axios.post("/api/shopping/register.php",user).then(function(res){
                    if(res.data=='ok'){
                        store.dispatch('setUsername',user.username);
                        console.log(store.state.username);
                        Router.push('/login');
                    }else{
                        console.log("用户已经存在");
                        console.log(res.data);
                    }
                })
            }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getBack(){
          this.$router.push('/');
      }
    }
  }

</script>
<style>
    .register_style{
        width: 500px;
        border: 1px solid #000;
        margin-top: 200px;
        border-radius: 25px;
        margin-left: 600px;
        background-color: aliceblue;
    }
    .demo-ruleForm{
        margin-right: 20px;
        margin-top: 20px;
    }
</style>